<template>
  <div class="container">
    <div class="item" v-for="(item, index) in cartList" :key="index">
      <div class="image">
        <img :src="item.productVo.path" alt="" />
      </div>
      <div class="info">
        <div class="name">{{ item.productVo.name }}</div>
        <div class="description">{{ item.productVo.description }}</div>
        <div class="price">￥ {{ item.productVo.price }}</div>
      </div>
      <div class="button">
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="buy(item)"
        ></el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          circle
          @click="deleteById(item.id)"
        ></el-button>
      </div>
    </div>

    <el-dialog title="收货地址" :visible.sync="isShow">
      <el-form :model="address">
        <el-form-item label="详细地址" :label-width="150">
          <el-input v-model="address.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" :label-width="150">
          <el-input v-model="address.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      cartList: [],
      address: {
          address: '',
          phone: ''
      },
      isShow: false,
      selectedCart: "",
    };
  },
  methods: {
    deleteById(id) {
      this.$http({
        url: "/user/deleteCartByCartId",
        method: "get",
        params: {
          cartId: id,
        },
      }).then((res) => {
        if (res == 1) {
          this.$message.success("删除成功");
          this.$router.go(0);
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    confirm() {
        if (this.address.address == '' || this.address.phone == '') {
            this.$message.error('地址不能为空')
            return;
        }
        console.log(this.selectedCart);
      this.$http({
        url: "/user/doBill",
        method: "post",
        params: {
          productId: this.selectedCart.productVo.id,
          address: this.address.address,
          phone: this.address.phone,
          price: this.selectedCart.productVo.price,
          cartId: this.selectedCart.id
        },
      }).then((res) => {
        if (res == -1) {
          this.$message.error("余额不足");
        } else if (res == -2) {
          this.$message.error("库存不足");
        } else if (res == 1) {
          this.$message.success("下单成功");
          this.$http({
            url: "/user/getUserInfoById",
            method: "get",
          }).then((res) => {
            if (res != null) {
              this.$store.commit("setUserInfo", res);
            }
            this.$router.go(0);
          });
        } else {
          this.$message.error("下单时发生错误");
        }
      });
      this.isShow = false;
    },
    cancel() {
      this.isShow = false;
    },
    buy(product) {
      this.selectedCart = product;
      this.isShow = true;
    },
  },
  created() {
    this.$http({
      url: "/user/getCartByUserId",
      method: "get",
    }).then((res) => {
      this.cartList = res;
    });
  },
};
</script>


<style scoped>
.container {
  width: 70%;
  margin: auto;
  display: flex;
  flex-direction: column;
}

.item {
  height: 150px;
  background-color: #e4e7ed;
  margin-top: 15px;
  padding: 10px;
  display: flex;
  border-radius: 15px;
}

.image {
  flex: 4;
}

.image img {
  width: 100%;
  height: 100%;
}

.info {
  flex: 20;
  display: flex;
  flex-direction: column;
}

.info .name {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 35px;
  margin-left: 30px;
}

.info .description {
  flex: 1;
  margin-left: 30px;
  color: #303133;
}

.info .price {
  flex: 1;
  margin-left: 30px;
  font-size: 25px;
  font-weight: 350;
  color: red;
}

.button {
  flex: 4;
  display: flex;
  align-items: center;
}
</style>